<template>
    <div class="banner">
        <img :src="BannerList[currentIndex]" alt="">
        <div class="bannerList">
            <span v-for="item,index in BannerList" @click="gotoPage(index)" :class="{page:currentIndex == index}"
                :key="index"></span>
        </div>
        <div class="left" @click="gotoPage(prevIndex)"> ◀ </div>
        <div class="right" @click="gotoPage(nextIndex)">▶</div>
    </div>
</template>
<script>
import {}
export default {
    data() {
        return {
            BannerList: [
                // 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/dfc11bb0-4af5-4e9b-9458-99f615cc685a.jpg',
                // 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg',
                // 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg',
                // 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/e83efb1b-309c-46f7-98a3-f1fefa694338.jpg',
                // 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/4a79180a-1a5a-4042-8a77-4db0b9c800a8.jpg'




            ],
            currentIndex: 0,
            timer: null,
        }
    },
    methods: {
        gotoPage(index) {
            this.currentIndex = index
            console.log(this.currentIndex, index);
        },

     async getimg(){
            var res=await this.getimg();
            if(res.data.msg=='操作成功'){
                this.BannerList=res.data.result
            }
        }
    },
    computed: {
        prevIndex() {
            if (this.currentIndex == 0) {
                return this.BannerList.length - 1;
            } else {
                return this.currentIndex - 1;
            }
        },
        nextIndex() {
            if (this.currentIndex == this.BannerList.length - 1) {
                return 0;
            } else {
                return this.currentIndex + 1;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.banner {
    width: 1240px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98;

    img {
        width: 100%;
    }

    .bannerList {
        position: absolute;
        left: 0;
        bottom: 20px;
        padding-left: 250px;
        z-index: 2;
        width: 100%;
        text-align: center;

        span {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: rgba(0, 0, 0, .2);
            border-radius: 50%;
            cursor: pointer;
            margin-right: 15px;
        }

        .page {
            background: #fff;
        }
    }

    .left {
        width: 44px;
        height: 44px;
        background: rgba(0, 0, 0, .2);
        color: #fff;
        border-radius: 50%;
        position: absolute;
        top: 228px;
        left: 270px;
        z-index: 2;
        text-align: center;
        line-height: 44px;
        // opacity: 0;
        transition: all .5s;
        cursor: pointer;
        user-select: none;
    }

    .right {
        width: 44px;
        height: 44px;
        background: rgba(0, 0, 0, .2);
        color: #fff;
        border-radius: 50%;
        position: absolute;
        top: 228px;
        right: 20px;
        z-index: 2;
        text-align: center;
        line-height: 44px;
        // opacity: 0;
        transition: all .5s;
        cursor: pointer;
        user-select: none;
    }
}
</style>